<template>
   <div class="editForm">
       <div class="basicInfo">基本信息</div>
       <div class="editArea">
            <el-form v-if="isShowForm" :model="ruleForm"  ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <form-item @onConfirm="onConfirm" v-for="configItem in userConfig" :data="configItem" :key="configItem.name" :type="configItem.type"/>
           </el-form>
       </div>
       <div class="submitButtons">
             <el-button type="primary" @click="save">保存</el-button>
             <el-button @click="cancel">取消</el-button>
       </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue,Prop,Emit} from 'vue-property-decorator';
import FormItem from "@/common/form-item/index.vue";
@Component({
  components: {
      FormItem
  },
})
export default class SearchArea extends Vue {
     @Prop() private userConfig!: any;
     @Prop() private saveData!: any;
     @Prop() private cancelData!: any;
     @Prop() private ruleForm!:any;
     private isShowForm:boolean=false;
     async created(){
        this.$nextTick(()=>{
            this.isShowForm=true;
        })
     }
     @Emit("onConfirm")
     private onConfirm(params:any){
         return params;   
     }
     private save(){
         this.saveData();
     }
     private cancel(){
         this.cancelData();
     }
}
</script>

<style lang="less">
    .editForm{
          width: 100%;
          height: 100%;
          overflow: auto;
          display: flex;
          flex-direction: column;
           .el-form-item{
                width: 100%;
                display: flex;
                margin-bottom: 10px;
            }
            .el-form-item__content{
                margin-left: 0px!important;
                width: calc(100% - 150px);
            }
            .formInput{
                margin-left: 80px;
                display: flex;
                align-items: center;
                float: left;
                width: 40%;
                .el-switch{
                    width: 100%;
                }
            }
            .basicInfo{
                    font-size: 15px;
                    color: #6379bb;
                    border-bottom: 1px solid #ddd;
                    margin: 8px 10px 25px 10px;
                    padding-bottom: 5px;
            }
            .el-input__inner{
                height: 34px;
                line-height: 34px;
            }
            .submitButtons{
                display: flex;
                justify-content: center;
                margin-top: 20px;
            }
            .editArea{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .el-form-item__error{
                padding-top: 0px;
            }
            .el-form-item__label{
                font-size: 13px;
            }
    }
</style>
